<template>
    <div>
        <Home></Home>
        <button @click="increment">increment</button>
    </div>
</template>

<script>
    import { provide, ref, readonly } from 'vue';

    import Home from './Home.vue';

    export default {
        components: {
            Home
        },
        setup() {
            const name = ref('coderleon');
            let counter = ref(100);

            // 不能让子组件修改数据
            provide('name', readonly(name));
            provide('counter', readonly(counter));
            // provide('counter', counter);

            const increment = () => {
                 counter.value++
            }

            return {
                increment
            }
        }
    }
</script>

<style scoped>

</style>